<template>
    <div id="set-nickname">
        <div class="setList" @click="set()">
            <div class="setList-left">简介</div>
            <div class="setList-right">
                <i class="iconfont icon-jiantou"></i>
                <span class="brief">{{ brief }}</span>
            </div>
        </div>
        <!--设置昵称-->
        <div v-if="show" class="set-wrap">
            <div id="purchased">
                <div class="purchased-top">
                    <i class="iconfont icon-fanhui" @click="close"></i>
                    <span>简介</span>
                </div>
            </div>
            <div class="settingIntro">
                <textarea maxlength="30" v-model="value" @input="descInput"></textarea>
                <div class="fr">{{ remnant }}</div>
            </div>
            <!--<div class="SaveBtn" v-if="change">保存</div>-->
            <!--<div class="okSave font1" v-if="!change" @click="save()">保存</div>-->
        </div>
    </div>
</template>

<script>
    import {userService} from '../../service/userService'
    export default {
        data () {
            return {
                show:false,
                change:'',
                brief:'',
                value:'',
                remnant:30,
                type:1
            }
        },
        props:['descripthion'],
        watch:{
            descripthion(cur,old){
                this.brief = cur
                this.value = cur
                if(this.value){
                    this.remnant = 30 - this.value.length
                }else{
                    this.remnant = 30
                }

            }
        },
        mounted(){
        },
        methods:{
            //更改简介
            save:function(){
                let that = this
                if(that.value == ''){
                    that.show = false;
                    return
                }else{
                    userService.myCenterSet({descripthion:that.value}).then(function (res) {
                        that.show = false;
                        that.brief = that.value;
                    });
                }
            },
            //清除名字按钮
            descInput:function(){
                this.remnant = 30 - this.value.length
            },
            set:function(){
                let that = this;
                that.show = true
                that.value = that.brief;
            },
            close:function(){
                let that = this;
                if(that.value == ''){
                    that.show = false
                    return
                }else{
                    userService.myCenterSet({descripthion:that.value}).then(function (res) {
                        that.brief = that.value;
                        that.show = false;
                    });
                }


            },
        }
    }
</script>

<style lang="less">

    .settingIntro{
        width:100%;
        height:4.4rem;
        margin:0.27rem 0;
        padding:0.5rem 0.53rem;
        box-sizing: border-box;
        background:#fff;
        position: relative;
        textarea{
            width:100%;
            height:100%;
            border:none;
            outline: none;
            resize : none;
            font-size: 16px;
            color: #333333;
            line-height:0.57rem;
        }
        p{
            position: absolute;
            right:0.3rem;
            bottom:0;
            font-size: 14px;
            color: #BBBBBB;;
            letter-spacing: 0;
        }
    }
    .setList-right{
        .brief{
            float:right;
            line-height:0;
            text-align: right;
        }
    }
    .fr{
        position: absolute;
        right:0.2rem;
        bottom:0.2rem;
        color:#BBB;
        font-size:14px;
    }
</style>